import React,{useEffect, useState} from 'react';
import '../../styles/zheng/DataTeam.scss'
import { Tabs, Button,Modal,Table,message} from 'antd';
import { useNavigate } from 'react-router-dom'
import { ExclamationCircleFilled } from '@ant-design/icons'
import MenageTeam from './MenageTeam';
import JoinTeam from './JoinTeam';
import {getMngtable,patchMngtable} from '../../api/zheng/index'
interface Props {

}


function DataTeam(props: Props) {
  const navigate = useNavigate()
  const { confirm } = Modal;
  const [list,setList] = useState([])
  const [isModalOpen, setIsModalOpen] = useState(false);
  var [loading, setLoading] = useState(false)
  const [messageApi, contextHolder] = message.useMessage()
  var [pagination, setPagination] = useState({ current: 1, pageSize: 5, total: 100 })
  const items = [
    {
      key: '1',
      label: `我管理的团队`,
      children: <MenageTeam />,
    },
    {
      key: '2',
      label: `我加入的团队`,
      children: <JoinTeam />,
    }
  ]
  // 挂载期
  useEffect(()=>{
    getMngtable().then(res=>{
      console.log(res);
      setList(res.data)
      setPagination({
        ...pagination, total: res.data.length
    })
    })
  },[])
  // 变化的时候
  const onChange = (key: string) => {
    console.log(key);
  };

  //  点击新增医生团队
  const addteam = () => {
    navigate('/index/info-team-addteam')
  }
  // 显示弹窗
  const showModal = () => {
    setIsModalOpen(true);
  };
  // 弹窗确认
  const handleOk = () => {
    setIsModalOpen(false);
  };
  //弹窗取消
  const handleCancel = () => {
    setIsModalOpen(false);
  };
   // 分页发生改变后执行
   const handleChange = (pagi:any) =>{
    setPagination(pagi) //更新页码
    setLoading(true)
    // 请求新的页码对应的数据
    getMngtable().then(res=>{
        setLoading(false)
        setPagination({
                ...pagi,total:res.data.length
            })
    })
  }
   // 点击加入团队
   const showConfirm = (id: any) => {
    console.log(id)
    confirm({
        title: '加入确认',
        icon: <ExclamationCircleFilled />,
        content: '确定申请加入该团队吗？',
        okText: "确认",
        cancelText: "取消",
        onOk() {
          getMngtable().then(res=>{
            var arr= res.data.find((item:any)=>{
              return item.id==id
            })
            if(arr.isjoin){
              messageApi.open({
                type: 'warning',
                content: '您已加入该团队',
              });
              
            }else{
              patchMngtable({...arr,isjoin:true}).then(res=>{
                messageApi.open({
                  type: 'success',
                  content: '加入成功',
                });
              })
            }
           
          })
        },
        onCancel() {
            console.log('已取消');

        },
    });
}
  // 表格
  const columns = [
    {
        title: '团队编号', //表格头的标题
        dataIndex: 'id', //数据索引，决定通过哪个属性名（字段名）获取数据
        key: 'id',
    },
    {
        title: '头像',
        dataIndex: 'avatar',
        key: 'avatar',
        render: (_: any, record: any) => {
            return (
                <img src={record.avatar} />
            )
        }
    },
    {
        title: '团队名称',
        dataIndex: 'teamname',
        key: 'teamname',
    },
    {
        title: '所属机构',
        dataIndex: 'oforg',
        key: 'oforg',
    },
    {
      title: '团队状态',
      dataIndex: 'states',
      key: 'states',
      render:(states:string)=> <span style={{color:states?"#21e121":"#ccc",fontSize :'12px'}}>{states?'启用中':"未启用"} </span>
  },
    {
        title: '操作',
        dataIndex: 'handle',
        key: 'handle',
        render: (_: any, record: any) => { //动态渲染当前列的数据，和dataIndex有冲突
            return (
                <>
                    <a style={{color:"#2984f8"}} onClick={(id) => { showConfirm(record.id) }}>申请加入</a>
                </>
            )
        }
    },
]
  return (
    <div className='data-team'>
      <div className="title">
        <div className='leftborder'></div>
        <h3>团队管理</h3>
      </div>
      <div className="inputbox">
        <Tabs defaultActiveKey="1"
          items={items}
          onChange={onChange}
          tabBarExtraContent={{
            right: 
            <>
              <Button type="primary" onClick={addteam}>新增医生团队</Button>
              <Button type="primary" onClick={showModal}>申请加入团队</Button>
              <Button>导出</Button>
              </>
          }} />
      </div>
      <Modal title="申请加入团队" open={isModalOpen}  onCancel={handleCancel} width={800} okText='确认' cancelText='取消'>
          <Table
                dataSource={list}
                pagination={pagination}
                onChange={(pagi) => { handleChange(pagi) }}
                loading={loading}
                columns={columns} />
      </Modal>
      {contextHolder}
    </div>
  );
}

export default DataTeam;